import './index.less'
import { getAntd,getEcCom,getLabel } from '../../util/convert';
import { trim } from '../../util/public/common';
import WfRichText from './WfRichText'
import { realLength,checkLength } from '../../util/public/inputUtil';
import * as Util from '../../util/formUtil';

export default class main extends React.Component {
	static defaultProps={
		detailtype:1,
		style:{},
		viewAttr:2,
	}
	constructor(props) {
		super(props);
		this.state = {
			value: props.value ? props.value : "",
			isonfocus: false
		};
	}

	componentWillReceiveProps(nextProps) {
		if(this.state.value !== nextProps.value) {
			this.setState({
				value: nextProps.value
			});
		}
	}
	shouldComponentUpdate(nextProps, nextState) {
		if(this.props.defaultFocus && this.props.defaultFocus !== nextProps.defaultFocus)	//延时失去焦点时不渲染组件
			return false;
		return nextProps.value !== this.props.value ||
			   nextProps.viewAttr !== this.props.viewAttr ||
			   nextProps.JSComplete !== this.props.JSComplete || 
			   this.state.value !== nextState.value ||
			   this.state.isonfocus !== nextState.isonfocus ||
			   nextProps.defaultFocus !== this.props.defaultFocus ||
			   nextProps.emptyShowContent !== this.props.emptyShowContent;
	}

	componentDidUpdate(){
		const {value} = this.state;
		const {defaultFocus,detailtype,viewAttr,fieldName} = this.props;
		if(defaultFocus && viewAttr === 3){
			if(detailtype == 2){
				this.refs[fieldName] && this.refs[fieldName].ckfocus();
			}else{	//存在=0情况作为多行文本处理
				const input = this.refs.inputEle.refs.input;
				if(input != document.activeElement){
					input.focus();
					const index = trim(value).length;
					input.setSelectionRange(index, index);	//光标定位到最后
				}
			}
		}
	}

	render() {
		const {Input,message} = getAntd();
		let {value = "",isonfocus} = this.state;
		const { viewAttr, fieldid, detailtype, textheight, length ,fieldName, style} = this.props;
		const newStyle = {...style};
		let {emptyShowContent} = this.props;
		if(viewAttr === 2 || viewAttr === 3)
			newStyle.paddingRight = "12px";
		let styleInfo = { 'word-break': 'break-all', 'word-wrap': 'break-word' ,'width':'100%'};
		let requiredSpan = null;
		if(viewAttr !== 1){
			let _value  = value.replace(/<p>/ig,'').replace(/<\/p>/ig,'').replace(/ /ig, "").replace(/&nbsp;/ig, "").replace(/<br \/>/ig,"");
			const isRequired = viewAttr === 3 && trim(_value).length === 0;
			requiredSpan = <span id={`${fieldName}span`} className="wf-textarea-required">
				{isRequired ? <img src="/images/BacoError_wev9.png" align="absmiddle" /> : ""}
			</span>;
		}
		if(detailtype === 2) {
			const needRenderCK = viewAttr > 1 || !!(window.FORM_CK_REF && window.FORM_CK_REF[`field${fieldid}`]);
			return (
				<div className="wf-form-textarea" style={newStyle}>
					{viewAttr === 1 &&
						<div className="wf-form-textarea-html-show" ref="htmlShowDiv" style={{overflowX:"auto",overflowY:"hidden", maxWidth:"calc(100% - 4px)"}} dangerouslySetInnerHTML={{__html: value}} />
					}
					{
						needRenderCK &&
						<div style={{"display":viewAttr > 1 ? "block" : "none"}} className="wea-wf-richtext-div">
							<WfRichText ecId={`${this && this.props && this.props.ecId || ''}_WfRichText@d94ueo`} placeholder={emptyShowContent} editorId={fieldName} value={value} ref={fieldName} textheight={textheight} onChange={this.doRichTextChangeEvent}/>
						</div>
					}
					{requiredSpan}
				</div>
			)
		} else {
			if(viewAttr === 1){
				return <span className="wf-form-textarea">
							<span style={newStyle} id={fieldName+"span"} dangerouslySetInnerHTML={{__html: value}}></span>
							<input type="hidden" id={fieldName} name={fieldName} value={value} />
					   </span>
			}else{
				//支持可编辑无值时显示灰色默认值
				emptyShowContent = emptyShowContent || "";
				if(!isonfocus && emptyShowContent !== "" && value === ""){
					styleInfo["color"] = "#A5A5A5";
					// if(Util.getBrowserVersion() === "IE9"){
						value = emptyShowContent;
					// }
				}else{
					styleInfo["color"] = "";
				}
				return <div className="wf-form-textarea" style={newStyle}>
							<Input ecId={`${this && this.props && this.props.ecId || ''}_Input@rulaza`} ref="inputEle"  type="textarea"
									value={value}
									// placeholder={emptyShowContent}
									id={fieldName}
									name={fieldName}
									rows={textheight}
									className={`wf-form-textarea-${fieldid}`}
									style={styleInfo}
									onFocus={this.doFocusEvent}
									onBlur={this.doBlurEvent}
									onKeyDown={this.doKeyDown}
									onChange={this.setTextAreaValue} />
							{requiredSpan}
						</div>
			}
		}
	}
	doFocusEvent = (e) => {
		this.setState({isonfocus: true});
	}
	doBlurEvent = (e) => {
		this.setState({isonfocus: false});
		this.props.onChange && this.props.onChange(e.target.value);
	}
	doKeyDown = (e) =>{
		e.stopPropagation();	//阻止冒泡，form有keyDowm事件禁止enter键
	}
	setTextAreaValue = (e) =>{
		const {fieldlabel,fielddbtype} = this.props;
		let value = e.target.value;
		//text 不限制长度
		if('text' !== fielddbtype) {
			let valLen = realLength(value);
			let length = 4000;
			let specialChar = value.match(/\"| /ig);
			if(specialChar)
				length = length - specialChar.length*5;		//后台转译成6个字符
			specialChar = value.match(/&|<|>|\n/ig);
			if(specialChar)		//后台转译成4个字符
				length = length - specialChar.length*3;
			if(length && valLen > length) {
				const{ message } = getAntd();
				message.warning(`${fieldlabel}${getLabel(386376,'字段值长度不能超过4000')}(${getLabel(124962,'1个中文字符等于3个长度')})`);
				value  = checkLength(value, valLen, length);
			}
		}
		this.setState({value: value});
	}

    doRichTextChangeEvent = (value) => {
		this.setState({value:value});
        this.props.onChange && this.props.onChange(value);
	}
}
